<template>
  <div>
    <el-table ref="table" v-loading.body="listLoading" :data="list" element-loading-text="加载中" border fit highlight-current-row @row-click="handleRowChange" @selection-change="selectRowChange">
      <el-table-column type="selection" />
      <el-table-column v-for="(column) in columns" :key="column.value" :label="column.text" :width="column.width" :sortable="column.sort" :prop="column.value">
        <template slot-scope="scope">
          {{ scope.row[column.value] }}
        </template>
      </el-table-column>
      <template>
        <slot name="tableColumn" />
      </template>
      <el-table-column v-if="controlColumn" label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="editFun" type="success" size="small" icon="el-icon-edit" @click="editData(scope.row.id)">编辑</el-button>
          <el-button v-if="delFun" type="danger" size="small" icon="el-icon-delete" @click="delData(scope.row.id)">删除</el-button>
          <slot :row="scope.row" name="Button" />
        </template>
      </el-table-column>
    </el-table>
    <div v-if="paging" class="pagination-container">
      <el-pagination :current-page="pagination.page" :page-sizes="[10,20,30,50]" :page-size="pagination.pageSize" :total="totalRow" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableModel',
  props: {
    pageFun: { // 获取分页的方法
      type: Function,
      default: null
    },
    handlerData: { // 操作表数据方法
      type: Function,
      default: null
    },
    delFun: { // 删除方法
      type: Function,
      default: null
    },
    editFun: { // 编辑方法
      type: Function,
      default: null
    },
    columns: { // 表头
      type: Array,
      default: () => []
    },
    isLoad: {
      type: Boolean,
      default: true
    },
    sortKey: {
      type: String,
      default: null
    },
    controlColumn: { // 操作列
      type: Boolean,
      default: false
    },
    paging: {
      type: Boolean,
      default: true
    },
    params: { // 表格参数
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      pagination: {
        page: 1,
        pageSize: 10
      },
      totalRow: 0,
      list: [],
      selectRow: [],
      listLoading: true
    }
  },
  created() {
    if (this.isLoad) {
      this.getPage(this.params)
    } else {
      this.listLoading = false
    }
    if (this.editFun || this.delFun) {
      this.controlColumn = true
    }
  },
  methods: {
    getPage(params) {
      this.params = params
      this.listLoading = true
      this.params.page = this.params.page === undefined || this.params.page === null ? this.pagination.page : this.params.page
      this.params.pageSize = this.params.pageSize === undefined || this.params.pageSize === null ? this.pagination.pageSize : this.params.pageSize
      this.pageFun(params).then(response => {
        this.list = response.data.list
        if (this.handlerData) {
          this.list = this.handlerData(response.data.list)
        }
        this.totalRow = response.data.totalRow
        this.pagination.page = this.params.page
        this.pagination.pageSize = this.params.pageSize
        this.listLoading = false
      }).catch(e => {
        console.error(e)
        this.listLoading = false
      })
    },
    // 刷新表单
    refreshPage() {
      this.getPage(this.params)
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getPage(this.params)
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getPage(this.params)
    },
    handleRowChange(row, event, column) {
      this.$refs.table.toggleRowSelection(row)
    },
    selectRowChange(selectRow) {
      this.selectRow = selectRow
    },
    delData(id) {
      const other = this
      this.$confirm('确认删除该数据？', { type: 'warning', confirmButtonText: '删除', cancelButtonText: '取消' })
        .then(_ => {
          this.delFun(id).then(response => {
            if (response.code === 0) {
              other.$message.success(response.msg)
              debugger
              other.refreshPage()
            } else {
              other.$message.info(response.msg)
            }
          })
        })
        .catch(_ => {
          other.$message.error('删除失败')
        })
    },
    editData(id) {
      this.editFun(id)
    }
  }
}
</script>
